<template>
	<view class="page-wrap">
		<u-form :model="form" ref="uForm">
			<u-form-item label="金额" prop="amount">
				<u-input v-model="form.amount" placeholder="请输入金额" />
			</u-form-item>
			<u-form-item label="数量" prop="num">
				<u-input v-model="form.num" placeholder="请输入数量" />
			</u-form-item>
		</u-form>
		<view @click="pays='deposit'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
			<view class="u-flex">
				<view class=" u-flex">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/card.png" mode="aspectFill" width="50rpx"
						height='50rpx'>
					</u-image>
					<view class="u-m-l-30 u-font-28 u-weight">钱包支付</view>
				</view>
				<view class="u-m-l-30">
					<view class=" cl_898989FF u-font-24">余额<text class="cl_FB473CFF">￥{{userinfo.user_wallet}}</text>
					</view>
				</view>
			</view>
			<view class="u-flex">

				<view class="">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx" height='30rpx'
						v-if="pays=='deposit'"></u-image>
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
						v-else></u-image>
				</view>
			</view>

		</view>
		<view style="color: #afacac;font-size: 26rpx;padding: 14rpx;">请充值余额并优先选择余额支付</view>

		<view @click="openEpayDialog" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
			<view class="">
				<view class=" u-flex">
					<u-image src="http://xcx.itcwc.com/wxImg/5dcf4786109a5.png" mode="aspectFill" width="50rpx" height='50rpx'>
					</u-image>
					<view class="u-m-l-30 u-font-28 u-weight">易支付</view>
				</view>

			</view>
			<view class="u-flex">
				<!-- <view class="u-m-r-20 cl_FB473CFF">-￥{{userinfo.goods_amount}}</view> -->
				<view class="">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx" height='30rpx'
						v-if="pays == 'epay'"></u-image>
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
						v-else>
					</u-image>
				</view>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN || APP || H5 -->
		<view @click="pays='wechat'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
			<view class="">
				<view class=" u-flex">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="50rpx" height='50rpx'>
					</u-image>
					<view class="u-m-l-30 u-font-28 u-weight">微信支付</view>
				</view>

			</view>
			<view class="u-flex">

				<view class="">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx" height='30rpx'
						v-if="pays=='wechat'"></u-image>
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
						v-else></u-image>
				</view>

			</view>

		</view>
		<!-- #endif -->

		<!-- #ifdef MP-ALIPAY || APP || H5 -->
		<view @click="pays='alipay'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
			<view class="">
				<view class=" u-flex">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="50rpx" height='50rpx'>
					</u-image>
					<view class="u-m-l-30 u-font-28 u-weight">支付宝支付</view>
				</view>

			</view>
			<view class="u-flex">

				<view class="">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx" height='30rpx'
						v-if="pays=='alipay'"></u-image>
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
						v-else></u-image>
				</view>
			</view>

		</view>
		<!-- #endif -->
		<u-popup v-model="shows" mode='center'>
			<view class="u-p-30 u-h-200" v-if="shows">
				<u-message-input :focus="true" :maxlength='6' @finish="finish"></u-message-input>
			</view>
		</u-popup>

		<!-- 易支付选择弹窗 -->
		<u-popup v-model="showEpayDialog" mode="center" width="80%" border-radius="10">
			<view class="epay-dialog">
				<view class="epay-dialog-title">请选择支付方式</view>
				<view class="epay-dialog-content">
					<view class="epay-payment-option" @click="selectEpayMethod('wxpay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayParams.epay_type === 'wxpay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">微信支付</view>
					</view>
					<!-- 在微信小程序环境下不显示支付宝支付选项 -->
					<view class="epay-payment-option" @click="selectEpayMethod('alipay')" v-if="!isWechatMP">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayParams.epay_type === 'alipay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">支付宝支付</view>
					</view>
				</view>
				<view class="epay-dialog-footer">
					<view class="epay-dialog-btn cancel-btn" @click="showEpayDialog = false">取消</view>
					<view class="epay-dialog-btn confirm-btn" @click="confirmEpayMethod">确定</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
		<u-button class="u-m-t-20" type="success" @click="submit">支付生成邀请码</u-button>
	</view>
</template>

<script>
import {
	URL
} from '@/config/config.js'
export default {
	data() {
		return {
			form: {
				amount: '',
				num: ''
			},
			pays: 'wechat',
			userinfo: {},
			shows: false,
			showEpayDialog: false,
			isWechatMP: false,
			epayParams: {
				epay_type: 'wxpay',
				method: '',
			},
			rules: {
				amount: [{
					type: 'number',
					message: '金额必须是数字',
					trigger: 'change'
				}, {
					required: true,
					message: '请输入金额',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['change', 'blur']
				},

				],
				num: [{
					type: 'number',
					message: '数量必须是数字',
					trigger: 'change'
				}, {
					required: true,
					message: '请输入数量',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['change', 'blur']
				},

				]
			}
		}
	},
	onLoad() {
		this.userinfo = uni.getStorageSync("userinfo") || {}
		this.detectDeviceType()
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					this.getChargeAmount()
				} else {
					console.log('验证失败');
				}
			});
		},
		getChargeAmount() {
			this.$api.getChargeAmount({
				...this.form,
				type: 1,
				qrcode_url: `${URL.split('index.php')[0]}member/#/pages/login/register`
			}, res => {
				this.pay(res.data.data)
				// console.log(res)
			})
		},
		finish(e) {
			console.log('输入结束，当前值为：' + e);
			this.yuePay(e)
			this.shows = false
		},
		yuePay(e = '') {
			if (this.pays == 'epay') {
				let epayParams = {
					...this.params,
					type: this.epayParams.epay_type,
					method: this.epayParams.method,
					trade_pwd: e
				}
				this.$com.easyPay(epayParams, this.pays);
			} else {
				uni.showLoading({
					title: '支付中',
					mask: true
				});
				this.$api.go_pay2({
					...this.params,
					type: this.epayParams.epay_type,
					method: this.epayParams.method,
					trade_pwd: e
				}, res => {
					uni.hideLoading();
					if (res.data.code == 0) {
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success',
							callback: cal => {
								uni.navigateBack()
							}
						})

					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
			}
		},
		pay(obj) {
			let params = {
				target_id: obj.code_id,
				target_type: 'deduct_charge',
				pay_type: this.pays,
				// #ifdef APP-PLUS
				client: 'APP',
				// #endif
				// #ifdef MP-WEIXIN || MP-ALIPAY
				client: 'JSAPI',
				// #endif
				// #ifdef H5
				client: 'WAP',
				// #endif
				trade_pwd: '',
				random: 1
			}

			if (this.pays == 'deposit') {
				// this.shows = true
				this.params = params
				this.yuePay()
				return
			}

			if (this.pays == 'epay') {
				this.params = params
				this.yuePay()
				return
			}

			// #ifdef APP-PLUS
			this.$com.wxPay2(params, this.pays).then(ok => {
				console.log(ok)
				this.$refs.uToast.show({
					title: '提交成功',
					type: 'success',
					callback: cal => {
						uni.navigateBack()
					}
				})
			})
			// #endif
			// #ifdef H5
			this.$com.wxPay2(params, this.pays).then(ok => {
				console.log(ok)
				const div = document.createElement('div');
				div.id = 'alipay';
				div.innerHTML = ok;
				document.body.appendChild(div);
				document.querySelector('#alipay').children[0].submit()
			})
			// #endif
			// #ifdef MP-WEIXIN
			this.$com.weChatPay2(params, this.pays).then(ok => {
				this.$refs.uToast.show({
					title: '提交成功',
					type: 'success',
					callback: cal => {
						uni.navigateBack()
					}
				})
			})
			// #endif

			// #ifdef MP-ALIPAY
			this.$com.aliPay2(params, this.pays).then(ok => {
				this.$refs.uToast.show({
					title: '提交成功',
					type: 'success',
					callback: cal => {
						uni.navigateBack()
					}
				})
			})
			// #endif
		},
		// 打开易支付弹窗
		openEpayDialog() {
			this.pays = 'epay'
			this.showEpayDialog = true
		},
		// 选择易支付方式
		selectEpayMethod(method) {
			this.epayParams.epay_type = method
		},
		// 确认易支付方式
		confirmEpayMethod() {
			this.showEpayDialog = false
		},
		// 检测设备类型并设置相应的method参数
		detectDeviceType() {
			// #ifdef H5
			this.epayParams.method = 'web' // H5环境使用web
			this.isWechatMP = false
			// #endif

			// #ifdef MP-WEIXIN
			this.epayParams.method = 'jsapi' // 微信小程序环境使用jsapi
			this.isWechatMP = true
			// #endif

			// #ifdef MP-ALIPAY
			this.epayParams.method = 'jsapi' // 支付宝小程序环境使用jsapi
			this.isWechatMP = false
			// #endif

			// #ifdef APP-PLUS
			this.epayParams.method = 'web' // APP环境使用app
			this.isWechatMP = false
			// #endif

			console.log('当前设备类型:', this.epayParams.method)
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
}
</script>

<style>
.page-wrap {
	min-height: 100vh;
	padding: 30px;
	text-align: center;
	/* background-color: #ec1830; */
}

/* 易支付选择弹窗样式 */
.epay-dialog {
	background-color: #fff;
	padding: 30rpx;
}

.epay-dialog-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.epay-dialog-content {
	padding: 20rpx 0;
}

.epay-payment-option {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.radio-button {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: transparent;
}

.radio-selected {
	background-color: #3298FD;
}

.payment-icon {
	margin-right: 20rpx;
}

.payment-name {
	font-size: 28rpx;
}

.epay-dialog-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}

.epay-dialog-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
}

.confirm-btn {
	background-color: #3298FD;
	color: #fff;
}
</style>